<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>栅格布局</title>
		<link rel="stylesheet" href="./css/bootstrap.min.css">
		<link rel="stylesheet" href="./css/style.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_1849198_mipmv3eavpp.css"/>
	</head>
	<body>
		<div id="app">
			<header class="container">
				<section class="row header">
					<section class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
						<img src="./images/kuaiyimao.jpg" >
					</section>
					<!--  -->
					<section class="hidden-xs hidden-sm col-md-10 col-lg-10" id="nav">
						 <ul>
								<li><a href="#">网站首页</a></li>
								<li><a href="#">产品介绍</a></li>
								<li><a href="#">使用场景</a></li>
								<li><a href="#">相关案例</a></li>
								<li><a href="#">代理申请</a></li>
								<li><a href="#">资料下载</a></li>
								<li><a href="#">企业名录</a></li>
								<li><a href="#">最新资讯</a></li>
								<li><a href="#">登录/注册</a></li>
						</ul>
					</section>
					<section class="col-xs-6 col-sm-6 hidden-md hidden-lg">
						<i class="iconfont icon-icon-span" v-if="show==true" @click="open"></i>
						<i class="iconfont icon-icon-span" v-else @click="close"></i>
					</section>
				</section>
			</header>
		</div>
		<section class="banner container-fluid"></section>
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="./js/bootstrap.min.js"></script>
		<!-- 引入vuecdn -->
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					show:true,
				},
				methods:{
					open(){
						$('#nav').removeClass('hidden-xs hidden-sm')
						this.show=false
					},
					close(){
						$('#nav').addClass('hidden-xs hidden-sm')
						this.show=true
					}
				}
			})
		</script>
	</body>
</html>
